昨天大家都看到，當在寫文章時使用上傳圖片，圖片就會先預先上傳到後端來。
這時候我們就要開始建立如何處理圖片的程式碼。

建立處理圖片的商務邏輯，像是圖片大小、儲存地方等等，這些算是商務邏輯，
所以會建立一個介面和他的實作。

這邊會利用到DI的技巧與觀念。
可以理解成處理圖片這個動作是寫在一個function裡面，而這個function就像一個工具。

ArticleController.cs 這個檔案要使用這個工具前，需要先跟系統申請說，我需要這一個工具，
而這個申請的行為就是DI(相依性注入)

目標：
1.建立介面與實作
2.跟系統註冊這個工具(介面)

步驟：
step1.建立三個檔案
1.在Applications/ArticleService/Models路徑底下建立ImageUploadResponse.cs 用來裝上傳圖片的結果。

public class ImageUploadResponse
    {
        public int Uploaded { get; set; }
        public string FileName { get; set; } = string.Empty;
        public string Url { get; set; } = string.Empty;
        public string Msg { get; set; } = string.Empty;
    }

2.IArticleService.cs 定義介面(這是全部都會用到的方法，會出錯的話，可以先把還沒實作的先註解)。

public interface IArticleService
    {
        Task<ImageUploadResponse> UploadImage(IFormFile upload);

        Task CreateArticle(string content);

        Task UpdateArticle(UpdateArticleViewModel model);

        Task<IList<Article>> GetArticle(long? id);

        Task<IList<Article>> GetUpdateArticle(long? id);
    }

3.ArticleService.cs 實作文章的商務邏輯。

public async Task<ImageUploadResponse> UploadImage(IFormFile upload)
        {
            if (upload.Length <= 0) return null!;

            var fileName = Guid.NewGuid() + Path.GetExtension(upload.FileName).ToLower();

            var filePath = Path.Combine(
                   Directory.GetCurrentDirectory(), "wwwroot/images",
                   fileName);

            using (var stream = File.Create(filePath))
            {
                //程式寫入的本地資料夾裡面
                await upload.CopyToAsync(stream);
            }

            var url = $"{"/images/"}{fileName}";

            var reslult = new ImageUploadResponse
            {
                Uploaded = 1,
                FileName = fileName,
                Url = url,
                Msg = "sucess",
            };

            return reslult;
        }

step2.跟系統註冊這項服務，想到註冊就要想到program.cs，然後跟系統註冊你的工具。

// 註冊客製化介面
builder.Services.AddTransient<IArticleService, ArticleService>();

做到這裏後，再執行，上傳圖片後應該就會看到有新增圖片了